<template>
    <div class="recommend" @click="jump('details',data.id)">
        <img class="recommend_img" :src="$store.state.imgurlApi+data.image" alt="">
        <!--<div class="recommend_msg">满{{data.mf[0]}}返{{data.mf[1]}} <div class="right_sanjiao"></div></div>-->
        <div class="recommend_info">
            <div class="recommend_name">{{data.title}}</div>
            <div class="recommend_details">{{data.subtitle}}</div>
            <div class="recommend_money">￥{{data.price}} <div class="recommend_addBtn"><img src="../../../../static/img/jiahao.png" alt=""></div></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "recommend",
        props:['data'],
        methods:{
          jump(page,id){
            this.$router.push({
              name:page,
              query:{
                  id
              }
            })
          }
        }
    }
</script>

<style scoped>
    .recommend {
      width: 49.2%;
      background-color: #FFFFFF;
      box-shadow:0 .02rem .16rem 0 rgba(0, 0, 0, 0.1);
      border-radius: .05rem;
      margin-bottom: .1rem;
      font-size: 0;
    }
    .recommend img {
      width: 100%;
      height: 1.16rem;
      margin-bottom: .05rem;
    }
    .recommend_msg {
      display: inline-block;
      /*width:.53rem;*/
      height:.16rem;
      box-sizing: border-box;
      padding-left: .05rem;
      background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
      font-size: .11rem;
      color: #ffffff;
      text-align: left;
      position: relative;
      /*border-top-right-radius: .1rem;*/
      /*border-bottom-right-radius: .1rem;*/
    }
    .right_sanjiao {
      position: absolute;
      right: -.075rem;
      top: 0;
      width:0;
      height:0;
      border-width:.08rem 0 .08rem .08rem;
      border-style:solid;
      border-color:transparent transparent transparent rgba(255,110,0,1);/*透明 透明 透明 灰*/
    }
    .recommend_info {
      width: 100%;
      height: .9rem;
      box-sizing: border-box;
      padding: .12rem .15rem .14rem .12rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
    }
    .recommend_name {
      width: 100%;
      font-size: .14rem;
      color: #010101;
      font-weight:600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .recommend_details {
      width: 100%;
      font-size: .11rem;
      color: #999999;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .recommend_money {
      width: 100%;
      font-size: .15rem;
      color: #FF0000;
      font-weight:bold;
      position: relative;
    }
    .recommend_addBtn {
      position: absolute;
      top: 0;
      right: 0;
      width: .2rem;
      height: .2rem;
      box-sizing: border-box;
      border: .01rem solid #1AC694;
      border-radius: 50%;
    }
    .recommend_addBtn img {
      width: .2rem;
      height: .2rem;
      position: absolute;
      top: -.01rem;
      left: -.01rem;
    }

</style>
